<template>
    <div>
        <el-dialog title='' :visible.sync="isShow" @close="onClose" width="60%">
            <div class="common-view">
                <div style="text-align: center;font-size: 0.1rem;color: black;height: 50px;">
                    {{time}} {{week}}
                </div>
                <div style="height: calc(60vh - 50px)">
                    <el-table :data="tableData" class="hide-scrollbar" height="calc(60vh - 50px)"
                              :header-cell-style="headClass" :cell-style="rowClass" border>
                        <el-table-column prop="nickName" label="教师姓名">
                        </el-table-column>
                        <el-table-column prop="time" label="时间">
                        </el-table-column>
                        <el-table-column prop="monday" label="星期一">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.monday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="tuesday" label="星期二">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.tuesday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="wednesday" label="星期三">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.wednesday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="thursday" label="星期四">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.thursday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="friday" label="星期五">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.friday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="saturday" label="星期六">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.saturday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                        <el-table-column prop="sunday" label="星期日">
                            <template slot-scope="scope">
                                <div v-for="(item,index) in scope.row.sunday" :key="index">
                                    <div style="font-size: 0.06rem">
                                        {{item.courseName}}-{{item.name}}
                                    </div>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
            <div class="bottom-view">
                <div class="bottom-div-view">
                    <div style="color: black;font-size: 0.08rem;font-weight: bold;">
                        颜色示例 :
                    </div>
                    <div class="common-drop-view">
                        <span class="common-drop-color common-drop-gary"></span>
                        未开课
                    </div>
                    <div class="common-drop-view">
                        <span class="common-drop-color common-drop-green"></span>
                        已消课
                    </div>
                    <div class="common-drop-view">
                        <span class="common-drop-color common-drop-blue"></span>
                        已补课
                    </div>
                    <div class="common-drop-view">
                        <span class="common-drop-color common-drop-red"></span>
                        已请假
                    </div>
                </div>
                <div class="bottom-div-view" v-if="false">
                    <div class="btn-view">
                        上一页
                    </div>
                    <div class="btn-view">
                        下一页
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
    import TimeCalculation from '@/utils/TimeCalculation.js'
    import {getTeacherTimetablePackage} from '@/api/teacher.js'
    export default {
        props: ['isShowDialog','deptTeacherId'],
        data() {
            return {
                time:'',
                week:'',
                deptId:'',
                tableData:[],
                headerUrl: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
                isDisabled: false,
                //   是否显示当前dialog
                isShow: this.isShowDialog,

            }
        },
        watch: {
            deptTeacherId:{
                handler(newDeptId, oldDeptId) {
                    this.deptId = newDeptId;
                    console.log("deptId",this.deptId)
                },
                deep: true
            }
        },
        created() {
            this.time = TimeCalculation.getCurrentDateTime1();
            this.week = TimeCalculation.getCurrentWeekDay();
            this.getTeacherScheduleInfo();
        },
        computed: {},
        methods: {
            getTeacherScheduleInfo(){
                console.log(this.deptTeacherId)
                getTeacherTimetablePackage({
                    deptId:this.deptTeacherId,
                    searchDate:TimeCalculation.getNextData(0),
                }).then((res) => {
                    if (res.code == 200){
                        let listData = res.data.responseVoList;
                        let list = []
                        listData.map(item=>{
                            let itemList = {
                                time:item.startTime + "-" + item.endTime,
                                monday:[],
                                tuesday:[],
                                wednesday:[],
                                thursday:[],
                                friday:[],
                                saturday:[],
                                sunday:[],
                            }
                            item.timetables.map((item1,index)=>{
                                if (index == 0){
                                    itemList.monday = item1
                                }else if (index == 1){
                                    itemList.tuesday = item1
                                }else if (index == 2){
                                    itemList.wednesday = item1
                                }else if (index == 3){
                                    itemList.thursday = item1
                                }else if (index == 4){
                                    itemList.friday = item1
                                }else if (index == 5){
                                    itemList.saturday = item1
                                }else if (index == 6){
                                    itemList.sunday = item1
                                }
                            })
                            list.push(itemList)
                        })

                        // 用于存储按 nickName 分组后的结果
                        const groupedByNickname = {};

                        // 遍历每个时间段对象
                        list.forEach((timeSlot) => {
                            const { time } = timeSlot;
                            // 遍历对象的每个属性（即每一天）
                            Object.entries(timeSlot).forEach(([day, courses]) => {
                                // 排除 time 属性，只处理日期相关的属性
                                if (day!== 'time') {
                                    // 遍历当天的课程列表
                                    courses.forEach((course) => {
                                        const { nickName } = course;
                                        // 如果该 nickName 还未在 groupedByNickname 中，初始化其对应的对象
                                        if (!groupedByNickname[nickName]) {
                                            groupedByNickname[nickName] = {
                                                nickName,
                                                timeSlots: {}
                                            };
                                        }
                                        // 如果该 time 还未在 timeSlots 中，初始化其对应的对象
                                        if (!groupedByNickname[nickName].timeSlots[time]) {
                                            groupedByNickname[nickName].timeSlots[time] = {
                                                nickName,
                                                time,
                                                monday: [],
                                                tuesday: [],
                                                wednesday: [],
                                                thursday: [],
                                                friday: [],
                                                saturday: [],
                                                sunday: []
                                            };
                                        }
                                        // 将课程对象添加到对应 nickName、time 和日期的数组中
                                        groupedByNickname[nickName].timeSlots[time][day].push(course);
                                    });
                                }
                            });
                        });

                        // 提取所有 timeSlots 并组成新的集合
                        const result = [];
                        Object.values(groupedByNickname).forEach((item) => {
                            result.push(...Object.values(item.timeSlots));
                        });
                        this.tableData = result;
                    }else{
                        this.$message({
                            type: 'warning',
                            message: res.msg
                        });
                    }
                });
            },
            //关闭弹窗清空表单
            onClose() {
                this.$emit('closeTeacherSchedule')
            },
            headClass() {
                //表头居中显示
                return "text-align:center;padding:15px";
            },
            rowClass() {
                //表格数据居中显示
                return "text-align:center;padding:2px;";
            },
        },
    }
</script>
<style lang="scss" scoped>

    .common-view {
        width: 100%;
        height: calc(60vh);
        border-radius: 10px;
        padding: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

    /deep/ .el-dialog__wrapper {
        position: fixed;
        top: 10px;
    }

    /deep/ .el-dialog {
        margin-top: 10vh !important;
        -webkit-transform: none;
        transform: none;
        left: 0;
        position: relative;
        margin: 0 auto;
        border-radius: 15px;
    }

    /deep/ .el-dialog__title {
        line-height: 0.125rem;
        font-size: 0.09375rem;
        color: #303133;
        flex: auto;
        font-weight: bold;
    }

    /deep/ .el-dialog__headerbtn .el-dialog__close {
        color: #909399;
        font-size: 0.15rem;
    }

    /deep/ .el-dialog__header {
        padding: 0 !important;
    }

    /deep/ .el-dialog__body {
        padding: 1% 0.10417rem;
    }

    /* 隐藏表格底部横线 */
    /deep/ .el-table::after {
        height: 0 !important;
    }

    /deep/ .el-button--medium.is-round {
        padding: 0.08rem 0.2rem;
        font-size: 0.11rem;
        border-radius: 0.2rem;
    }

    .bottom-view {
        margin-bottom: 10px;
        margin-top: 15px;
        display: flex;
        flex-direction: row;
        justify-content: space-between;

        .bottom-div-view {
            display: flex;
            flex-direction: row;
            align-items: center;

            .btn-view {
                width: 80px;
                height: 35px;
                line-height: 35px;
                background: #0A77F9;
                color: white;
                text-align: center;
                border-radius: 5px;
                margin-right: 15px;
            }
        }
    }

    .common-drop-view {
        display: flex;
        flex-direction: row;
        align-items: center;
        margin-left: 10px;

        .common-drop-color {
            display: block;
            width: 5px;
            height: 5px;
            border-radius: 50%;
            margin-right: 5px;
        }

        .common-drop-gary {
            background: #d0d0d0;
        }

        .common-drop-blue {
            background: blue;
        }

        .common-drop-green {
            background: green;
        }

        .common-drop-red {
            background: red;
        }
    }

</style>

